<template>
  <div class="header">
    <div
      class="list"
      v-for="(item, index) of headerTitles"
      :key="item.index"
      :class="{ active: nowIndex == item.index }"
      @click="tabClick(index)"
    >
      {{ item.title }}
    </div>
    <div class="icon">
      <div class="search" @click="toSeek">
        <div class="circle">
          <span class="iconfont icon-sousuo"></span>
        </div>
      </div>
      <div class="avatar">
        <div class="circle" @click="toUser">
          <span class="iconfont icon-wode" v-if="!avatarUrl"></span>
          <img :src="avatarUrl" alt="" v-if="avatarUrl" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    headerTitles: Array,
  },
  data() {
    return {
      nowIndex: 0,
      avatarUrl: "",
    };
  },
  methods: {
    toUser() {
      this.$router.push("/user");
    },
    loadAvatar() {
      if (localStorage.username) {
        this.avatarUrl = "https://z3.ax1x.com/2021/04/28/giNFDe.jpg";
      }
    },
    tabClick(index) {
      this.nowIndex = index;
      this.$root.bus.$emit("tabSwitch", index);
    },
    toSeek() {
      this.$router.push("/seek");
    },
  },
  mounted() {
    this.loadAvatar();
    this.$root.bus.$on("pageSwitch", (index) => {
      this.nowIndex = index;
    });
  },
};
</script>
<style lang="scss" scoped>
.header {
  z-index: 2;
  position: relative;
  background: #fff;
  height: 10vh;
  display: flex;
  color: $fontGrayColor;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  .list {
    flex: 2;
    display: flex;
    justify-content: space-around;
    font-size: $titleFontSizeUnActive;
    position: relative;
  }
  .icon {
    flex: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .search {
      .circle {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        height: 0.56rem;
        width: 0.56rem;
        border-radius: 50%;
        box-shadow: 0 1px 8px $fontGrayColor;
      }
    }
    .avatar {
      .circle {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ddd;
        height: 0.56rem;
        color: white;
        width: 0.56rem;
        border-radius: 50%;
        margin-left: -0.6rem;
        box-shadow: 0 1px 8px $fontGrayColor;
        img {
          width: 0.56rem;
          border-radius: 50%;

          height: 0.56rem;
        }
      }
    }
  }
  .list::before {
    content: "▁▁";
    position: absolute;
    color: $themeColor;
    bottom: -0.55em;
    transition: 0.4s;
    transform: translateY(0.4rem);
    opacity: 0;
  }
  .active::before {
    transform: translateY(0);
    scale: 1;
    opacity: 1;
  }
  .active {
    color: $fontColor;
    font-size: $titleFontSize;
    font-weight: 700;
  }
}
</style>